<template>
  <el-col class="addfrom" :span="18">
    <el-col class="title">{{
      $route.query.id ? "修改商品" : "添加商品"
    }}</el-col>
    <el-col style="padding-top: 20px">&nbsp;</el-col>
    <el-form
      :model="form"
      ref="form"
      size="mini"
      :inline="false"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item label="选择商品类型" prop="type">
        <el-radio v-model="form.type" :label="1">普通商品</el-radio>
        <el-radio v-model="form.type" :label="2">活动商品</el-radio>
        <el-radio v-model="form.type" :label="3">每日活动商品</el-radio>
      </el-form-item>
      <el-col :span="8">
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="form.name" size="small"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="商品价格" prop="price">
          <el-input
            v-model="form.price"
            type="number"
            size="small"
            placeholder="请输入商品价格"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col>
        <el-col :span="8">
          <el-form-item label="商品规格" prop="specification">
            <el-input
              v-model="form.specification"
              size="small"
              placeholder="请输入商品规格"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品单位" prop="unit">
            <el-input
              v-model="form.unit"
              size="small"
              placeholder="请输入商品单位"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="form.type!=1">
          <el-form-item label="是否限购" prop="limit_buy">
            <el-radio v-model="form.limit_buy" :label="1">是</el-radio>
            <el-radio v-model="form.limit_buy" :label="0">否</el-radio>
          </el-form-item>
        </el-col>
      </el-col>
      <el-col :span="8">
        <el-form-item label="开票编号" prop="code">
          <el-input
            v-model="form.code"
            type="number"
            size="small"
            placeholder="请输入开票商品编码"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="服务名称" prop="server_name">
          <el-input
            v-model="form.server_name"
            size="small"
            placeholder="服务名称"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="邮递费" prop="fee">
          <el-input v-model="form.fee" type="number" size="small"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="18">
        <el-form-item label="商品描述" prop="info">
          <el-input v-model="form.info" type="textarea"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="7">
        <el-form-item label="商品封面" prop="cover">
          <upimg @getpath="getpath" ref="upimg"></upimg>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="商品轮播">
          <upimglist
            @getpath="getimage"
            @getfileid="getFileid"
            ref="upimglist"
            :limit="4"
          ></upimglist>
        </el-form-item>
      </el-col>
      <el-col>
        <template v-if="form.type != 1">
          <el-col :span="9">
            <el-form-item
              label="活动商品分类"
              prop="activity_id"
              v-if="form.type == 2"
            >
              <el-select
                v-model="form.activity_id"
                size="small"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in com_activity_list"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="活动商品单价" prop="act_price">
              <el-input
                v-model="form.act_price"
                placeholder="活动价格"
                type="number"
                size="small"
              ></el-input>
            </el-form-item>
          </el-col>
        </template>
      </el-col>
      <el-col :span="24">
        <!-- <el-form-item label="商品视频"> -->
        <!-- <upvideo @getpath="getvideopath"></upvideo> -->
        <!-- <upimglist @getpath="getimage" @getfileid="getFileid" ref="upimglist" :limit="4"></upimglist> -->
        <!-- </el-form-item> -->
      </el-col>
      <el-col :span="5">
        <el-form-item label="商品库存" prop="stock">
          <el-input
            v-model="form.stock"
            placeholder="请输入商品库存"
            type="number"
            size="small"
          ></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="商品分类" prop="com_type">
          <el-select v-model="form.com_type" size="small" placeholder="请选择">
            <el-option
              v-for="item in com_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="商品状态" prop="status">
          <el-select v-model="form.status" size="small" placeholder="请选择">
            <el-option
              v-for="item in statuslist"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="18">
        <el-form-item label="商品详情" prop="content">
          <!-- <el-input v-model="form.content" type="textarea"></el-input> -->
          <edits @getcontent="getcontent" :activedata="activedata"></edits>
        </el-form-item>
      </el-col>
      <el-col>
        <el-form-item>
          <template v-if="$route.query.id">
            <el-button type="warning" @click="onSubmit('form')"
              >修改内容</el-button
            >
          </template>
          <template v-else>
            <el-button type="primary" @click="onSubmit('form')"
              >立即创建</el-button
            >
            <el-button @click="clearfrom('form')">取消</el-button>
          </template>
        </el-form-item>
      </el-col>
    </el-form>
  </el-col>
</template>
<script>
import upimg from "@/components/upimg";
import upimglist from "@/components/uploderimg";
import edits from "@/components/edit";
// import upvideo from "@/components/uploadervideo";
export default {
  name: "addcommodity",
  data() {
    return {
      activedata: "", //当前数据
      form: {
        name: "",
        info: "",
        content: "",
        price: "",
        cover: "",
        image1: "",
        image2: "",
        image3: "",
        image4: "",
        stock: "",
        delivery: "",
        com_type: "",
        code: "",
        status: "",
        com_id: "",
        specification: "", //商品规格
        com_activity_type: "",
        type: 1, //区别普通商品
        limit_buy:1,//是否限购，限购为1，不限购为0，默认为1
        activity_id: "", //必选活动商品id
        act_price: "", //活动商品价格
        unit: "", //商品单位
        fee: "",
        server_name: "",
      },
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        info: [{ required: true, message: "请输入商品描述", trigger: "blur" }],
        content: [
          { required: true, message: "请输入商品详情", trigger: "blur" },
        ],
        price: [{ required: true, message: "请输入商品价格", trigger: "blur" }],
        cover: [{ required: true, message: "请上传封面", trigger: "blur" }],
        stock: [{ required: true, message: "请输入商品库存", trigger: "blur" }],
        com_type: [{ required: true, message: "商品分类", trigger: "blur" }],
        status: [{ required: true, message: "商品状态", trigger: "blur" }],
        specification: [
          {
            required: true,
            message: "请输入商品规格",
            trigger: "blur",
          },
        ],
        unit: [
          {
            required: true,
            message: "请输入商品单位",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入商品开票编码",
            trigger: "blur",
          },
        ],
        server_name: [
          {
            required: true,
            message: "请输入服务名称例：礼盒装或者其他",
            trigger: "blur",
          },
        ],
      },
      options: [
        {
          value: "快递",
          label: "快递",
        },
        {
          value: "到店自提",
          label: "到店自提",
        },
      ],
      imgarr: [],
      com_list: [],
      com_activity_list: [],
      statuslist: [
        {
          id: 1,
          name: "上架",
        },
        {
          id: 0,
          name: "下架",
        },
      ],
    };
  },
  components: {
    upimg,
    upimglist,
    edits,
    // upvideo
  },
  mounted() {
    this.getcomtype();
    if (this.$route.query.id) {
      this.check(this.$route.query.id);
    }
    this.getcom_activity_list();
  },
  methods: {
    async getcom_activity_list() {
      let res = await this.$store.dispatch("activity_class", "");
      if (!res.code) {
        this.com_activity_list = res.data;
      }
    },
    getvideopath(path) {
      //获取视频的地址
      console.log(path);
    },
    getcontent(data) {
      this.form.content = data;
    },
    async check(row) {
      //获取修改的信息
      //查看
      // console.log(index, row);
      this.dialog = true;
      let data = {
        com_id: row,
      };
      let res = await this.$store.dispatch("getdetail_commodity", data);
      this.form = res.data;

      this.activedata = res.data.content;

      this.$refs.upimg.cliearList(res.data.cover);
      for (let index = 0; index < 4; index++) {
        if (this.form["image" + (index + 1)]) {
          this.imgarr.push(this.form["image" + (index + 1)]);
        }
      }
      console.log(this.imgarr);
      this.$refs.upimglist.editimg(this.imgarr);
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        for (let index = 0; index < 4; index++) {
          this.form["image" + (index + 1)] = "";
        }
        if (this.imgarr.length > 0) {
          this.imgarr.map((item, index) => {
            this.form["image" + (index + 1)] = "";
            this.form["image" + (index + 1)] = item;
          });
        }
        if (valid) {
          if(this.form.type==1){
            this.form.limit_buy=''
          }
          if (this.$route.query.id) {
            //修改该方法时
            this.form.com_id = this.$route.query.id;

            this.commoditypost(this.form);
          } else {
            this.commoditypost(this.form);
          }
        } else {
          return false;
        }
      });
    },
    getimage(path) {
      console.log(path)
      this.imgarr.push(path);
      console.log(this.imgarr);
    },
    getFileid(id) {
      this.imgarr.splice(id, 1);
      if (this.imgarr.length > 0) {
        this.imgarr.map((item, index) => {
          this.form["image" + (index + 1)] = "";
          this.form["image" + (index + 1)] = item;
        });
      }
      console.log(this.form);
      console.log("删除", this.form);
    },
    getpath(path) {
      //封面
      this.form.cover = path;
      return path;
    },
    async getcomtype() {
      let res = await this.$store.dispatch("getcomtype", "");
      this.com_list = res.data;
    },
    async commoditypost(data) {
      let res = await this.$store.dispatch("addcommodity", data);
      if (!res.code) {
        if (this.$route.query.id) {
          this.$message({
            type: "success",
            message: "修改成功",
            duration: 1000,
          });
        } else {
          this.$message({
            type: "success",
            message: "创建成功",
            duration: 1000,
          });
        }
        this.imgarr = [];
        this.clearfrom("form");
        this.$router.push({
          path: "/home/conter",
        });
      } else {
        this.$message.error("添加商品失败");
      }
    },
    clearfrom(formName) {
      //清空表单
      this.$refs[formName].resetFields();
      this.$refs.upimg.handleRemove();
      this.$refs.upimg.cliearList();
      this.$refs.upimglist.cliear();
      this.form.com_id = "";
    },
    // 修改内容
  },
};
</script>
<style lang="scss">
.addfrom {
  min-width: 1000px;
}
</style>
